var x;
x = $(window);
x.load(slider_tips_disenio);

function slider_tips_disenio() {
    var imagen = $(".slider-cuerpo #slider-image");

    imagen.each(function(){
        centrar_imagen($(this));
    });

    $(".slider-cuerpo #slider-image:first").css('display','block');


    //EFECTO HOVER NEXT PREV
    $('div.next').hover(function(){
        $(this).stop(true,true).animate({
            right: '-=5'
        },300)
    }, function(){
        $(this).stop(true,true).animate({
            right: '+=5'
        },300)
    });

    $('div.prev').hover(function(){
        $(this).stop(true,true).animate({
            left: '-=5'
        },300)
    }, function(){
        $(this).stop(true,true).animate({
            left: '+=5'
        },300)
    });

    $('div.small-next').hover(function(){
        $(this).stop(true,true).animate({
            right: '-=5'
        },300)
    }, function(){
        $(this).stop(true,true).animate({
            right: '+=5'
        },300)
    });

    $('div.small-prev').hover(function(){
        $(this).stop(true,true).animate({
            left: '-=5'
        },300)
    }, function(){
        $(this).stop(true,true).animate({
            left: '+=5'
        },300)
    });


    //EFECTO SLIDER
    $('div.next').click(function(){
        //obtener la imagen actual
        var actual = $(".slider-tips #slider-image.current");
        if(!actual.length){
            actual = $(".slider-cuerpo #slider-image:first");
        }

        //obtener la id de la siguiente imagen
        var id = parseInt(actual.find('a').attr('class')) + 1;

        var cant = $(".slider-cuerpo #slider-image").size();

        //Si el ID de la siguiente imagen es mayor a la cantidad de imágenes seleccionar la primer imagen
        if(id >= cant){
            id = 0;
        }

        //Seleccionar el siguiente elemento
        var next = $(".slider-cuerpo #slider-image").find('a[class="'+id+'"]').parent();

        actual.slideUp(400);
        next.delay(400).slideDown(400);

        actual.removeClass('current');
        next.addClass('current');


        //MOVER LA CINTA DE MINIATURAS
        $('.small-tips').stop(true, true).animate({
            left: id*-160+160
        });

        //Marcar miniatura activa
        $(".small-image-list.current").removeClass('current');
        $(".small-image-list").find('a[class="'+id+'"]').parent().addClass('current');

    });

    $('div.prev').click(function(){
        //obtener la imagen actual
        var actual = $(".slider-tips #slider-image.current");
        if(!actual.length){
            actual = $(".slider-cuerpo #slider-image:first");
        }

        //obtener la id de la siguiente imagen
        var id = parseInt(actual.find('a').attr('class')) - 1;

        var cant = $(".slider-cuerpo #slider-image").size();

        //Si el ID de la siguiente imagen es mayor a la cantidad de imágenes seleccionar la primer imagen
        if(id < 0){
            id = cant-1;

        }

        //        alert('ID anterior: '+id);

        //Seleccionar el siguiente elemento
        var prev = $(".slider-cuerpo #slider-image").find('a[class="'+id+'"]').parent();


        actual.stop(true, true).slideUp(400, function(){
            prev.slideDown(400);
        });
        actual.removeClass('current');
        prev.addClass('current');

        //MOVER LA CINTA DE MINIATURAS
        $('.small-tips').stop(true, true).animate({
            left: id*-160+160
        });


        //Marcar miniatura activa
        $(".small-image-list.current").removeClass('current');
        $(".small-image-list").find('a[class="'+id+'"]').parent().addClass('current');

    });


    $('.small-image-list a').click(function(){
        //Obtener imagen actual
        var actual = $(".slider-tips #slider-image.current");
        if(!actual.length){
            actual = $(".slider-cuerpo #slider-image:first");
        }



        var id = $(this).attr('class');

        //Seleccionar el siguiente elemento
        var imagen_show = $(".slider-cuerpo #slider-image").find('a[class="'+id+'"]').parent();


        if(actual.find('a').attr('class') != imagen_show.find('a').attr('class')){
            actual.slideUp(400, function(){
                imagen_show.slideDown(400);
            });
            actual.removeClass('current');
            imagen_show.addClass('current');

            //Marcar miniatura activa
            $(".small-image-list.current").removeClass('current');
            $(this).parent('li').addClass('current');
        }
    });
    //FIN EFECTO SLIDER


    //EFECTO SLIDER SMALL
    var largo = $('.small-tips li').size() * 160 - 480;

    $('div.small-next').click(function(){

        //alert('Left: '+$('.small-tips').position().left+ ' || Largo: '+ largo);

        if($('.small-tips').position().left > -largo){
            $('.small-tips').stop(true, true).animate({
                left: '-=160'
            });
        }
    });


    $('div.small-prev').click(function(){
        if($('.small-tips').css('left') < '0px'){
            $('.small-tips').stop(true,true).animate({
                left: '+=160'
            });
        }
    });

//FIN EFECTO SLIDER SMALL

}

function centrar_imagen(imagen){
    var alto = imagen.height()/2;
    var ancho = imagen.width()/2;

    imagen.css('margin','-'+alto+ 'px 0 0 '+'-'+ancho+'px');
}